<template>
  <div class="content-wrap">
    <div class="home-left">
      <div class="system-icon-wrap">
        <div class="system-icon">
            <span class="num" >S22</span>
          <div class="icon-right">
            <fire-two-tone />
            <span class="icon-text">旗舰版</span>
          </div>
        </div>
        <div class="system-text" @click="ceshi">
          上海正也医药有限公司
        </div>
        <Abutton type="primary">11</Abutton>
      </div>
      <Menu

        v-model:selectedKeys="state.selectedKeys"
        style="width: 256px"
        mode="inline"
        :open-keys="state.openKeys"
        :items="items"
        @openChange="onOpenChange"
        @select="meneSelect"
      ></Menu>
    </div>
    <div class="home-right">
      <div class="right-icon-wrpa">
        <div class="icon-nerwrap">
          <BankFilled class="icon" /><span class="icon-text">首页</span>
        </div>
        <div class="icon-nerwrap">
          <BehanceCircleFilled class="icon" /><span>主数据</span>
        </div>
        <div class="icon-nerwrap">
          <BellFilled class="icon" /><span>辖区管理</span>
        </div>
        <div class="icon-nerwrap">
          <BookFilled class="icon color4BC264" />
          <div class="text-wrap">
            <span class="top-text">销讯通</span>
            <span class="bottom-text">行为管理系统</span>
          </div>
        </div>
        
      </div>
      <router-view/>
    </div>
  </div>
    
</template>
<script   setup>
  import {Menu} from "ant-design-vue"
  import { h, reactive } from 'vue';
  import { MailOutlined, AppstoreOutlined, SettingOutlined,SoundFilled,RedditSquareFilled,ThunderboltFilled,BankFilled,BehanceCircleFilled,BellFilled,BookFilled } from '@ant-design/icons-vue';

  import { useRouter } from 'vue-router'
  const router = useRouter()

  function ceshi() {
    console.log( state.selectedKeys,'iii')
  }
  function getItem(label, key, icon, children, type) {
    return {
      key,
      icon,
      children,
      label,
      type,
    };
  }
  const items = reactive([getItem('功能A', 'sub1', () => h(MailOutlined), [getItem('Option 1', '1'), getItem('Option 2', '2'), getItem('Option 3', '3'), getItem('Option 4', '4')]), getItem('功能B', 'sub2', () => h(AppstoreOutlined), [getItem('Option 5', '5'), getItem('Option 6', '6')]), getItem('功能C', 'sub3', () => h(SettingOutlined), [getItem('Option 7', '7'), getItem('Option 8', '8'), getItem('Option 9', '9'), getItem('Option 10', '10')]),getItem('功能D', 'sub4', () => h(SoundFilled), [getItem('Option 11', '11'), getItem('Option 12', '12')]),getItem('功能E', 'sub5', () => h(RedditSquareFilled), [getItem('Option 13', '13'), getItem('Option 14', '14')]),getItem('功能F', 'sub6', () => h(ThunderboltFilled), [getItem('Option 15', '15'), getItem('Option 16', '16')]),]);
  const state = reactive({
    rootSubmenuKeys: ['sub1', 'sub2','sub3', 'sub4','sub5','sub6'],
    openKeys: ['sub1'],
    selectedKeys: [],
  });
  const onOpenChange = openKeys => {
    // if(state.selectedKeys)
    const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
    if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      state.openKeys = openKeys;
    } else {
      state.openKeys = latestOpenKey ? [latestOpenKey] : [];
    }
  };
  const meneSelect = obj => {
    if(obj.key == 1) {
      router.push("about")
    }
  }



</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
  height: 100vh;
  width: 100%;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}



.content-wrap {
  display: flex;
  width: 100%;
}

.home-left {
  display: flex;
  flex-direction: column;
  padding: 20px 0 0 20px;
  background-color: #2A3139;

}
.system-icon-wrap {
  display: flex;
  flex-direction: column;
  .system-icon {
    display: flex;
    align-items: center;
    .num {
      font-size: 35px;
      font-weight: 900;
      color: #BE9D4E;
      margin-right: 10px;
    }
  }
  .system-text {
    font-size: 12px;
    margin-top: -10px;
    color: #B1B2B4;
  }
}
.icon-right {
  padding: 3px;
  background-color: #4F565C;
  border-radius: 10px;
  font-size: 14px;
  color: #BE9D4E;

}
.home-left {
  border-right: 1px solid #2A3139;
  .ant-menu {
    background-color: #2A3139;
    color: #B1B2B4;
    .ant-menu-submenu-title{
      padding-left: 0px!important;

    }
    .ant-menu-item {
      padding-left: 24px!important;
    }
  }

}
.home-right {
  flex: 1;

}
.right-icon-wrpa {
  display: flex;
  padding: 20px 0px 20px 80px;
  background-color:#2A3139;
  .icon-text {
    font-size: 16px;
  }

  .icon {
    font-size: 30px;
    margin-right: 5px;
  }
  .color4BC264 {
    color: #4BC264;
  }
  .icon-nerwrap {
    display: flex;
    align-items: center;
    margin-right: 40px;
    color: #BBB;
    .text-wrap {
      display: flex;
      flex-direction: column;
    }
    .top-text {
      font-size: 20px;
      font-weight: 700;
    }
    .bottom-text {
      font-size: 10px;
    }
  }

}


</style>
